<template>
    <!--我的帖子评论列表-->
    <div class="comment">
      <div class="person_post pt-3" v-if="this.comment_info.length>0">
        <div class="post" v-for="(post) in comment_info" :key=post.post_comment_id>
          <ul class="list-unstyled pl-2">
            <li class="media">
              <div class="media-body">
                <div class=" title">
                  <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                    <a class="" href="javascript:void(0);" >
                      {{post.post_title}}
                    </a>
                  </router-link>
                </div>
                <div class="content pt-2" >
                  <p>{{post.post_comment_content}}</p>
                </div>
                <div class="row fontclass" style="text-align: left;">
                  <div class="col-md-8">
                    <a class="pr-2" href="javascript:void(0);" @click="openUpdate(post.post_comment_id)">
                      <i class="fa fa-pencil fa-fw"></i> 修改
                    </a>

                    <!--                  弹窗修改-->
                    <el-dialog title="修 改 评 论" :visible.sync="dialogFormVisible" @close="handleClose" >


                      <el-form :model="CommentForm" :before-close="closeDiv" ref="CommentForm" label-width="100px" class="CommentForm" status-icon>

                        <el-form-item
                            label="评论内容"
                            prop="comment_content"
                            :label-width="formLabelWidth">
                          <el-input v-model="CommentForm.comment_content"
                                    show-word-limit
                                    type="textarea"
                                    maxlength="200"
                                    :rows="10"
                                    autocomplete="off"
                                    placeholder="请输入评论内容，1-200个字符"
                          ></el-input>
                        </el-form-item>

                        <el-form-item>
                          <el-button type="primary" @click="submitForm()">提 交</el-button>
                          <el-button @click="resetForm('CommentForm')">重 置</el-button>
                          <el-button @click="cancel()">取 消</el-button>
                        </el-form-item>

                      </el-form>

                    </el-dialog>


                    <a class="pr-2" @click="submit(post.post_comment_id)" href="javascript:void(0);">
                      <i class="fa fa-trash fa-fw"></i> 删除
                    </a>
                  </div>
                  <div class="col-md-4" align="right">
                    <p style="color: #6b6e71;font-size: 17px;">编辑于 {{post.post_comment_time}}</p>
                  </div>
                </div>




              </div>
            </li>
            <div class="dropdown-divider"></div>
          </ul>
        </div>



      </div>
      <div class="noFile" v-else>
        <img :src="imgs.noInfo" alt="...">
        <h2>{{this.nullContainer}}</h2>
      </div>
      <div class="block pt-3 pb-4" v-show="this.comment_info.length>0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2,5,10]"
            :page-size="param.limit"
            layout="total, prev, pager, next, jumper"
            :total="total">
          <!--          :background="'whitesmoke'" -->
        </el-pagination>
      </div>
    </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getMyPostComment,deletePostComment,updatePostComment} from '@/api/Discussion'
import {getUser_Basic} from "@/api/User";

export default {
  name: "my_post_comment",
  data(){
    return{
      imgs:{
        noInfo
      },
      //分页
      param: {
        key: '',
        page: 1,
        limit: 7,
      },
      currentPage: 1,
      total: 0,
      comment_info:[],
      nullContainer: "你还没有发表任何评论~",

      //弹窗编辑相关
      dialogFormVisible: false,
      formLabelWidth: '120px',
      CommentForm: {
        comment_content:"",
      },
      post_comment_id:'',
      user_ifcheck:'',

    }
  },
  methods:{
    init(){
      // 获取我的帖子评论
      getMyPostComment({
        page:this.param.page,
        limit:this.param.limit,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.comment_info=res.data.data;
        this.total=res.data.total;
      })
      //获取当前登录用户的审核情况
      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.user_ifcheck=res.data.ifcheck;
      });

    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.init();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.init();
    },
    //  删除评论
    submit(post_comment_id){

      //再次确认
      this.$confirm('确认删除该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.delete_comment(post_comment_id);

      }).catch(() => {
        this.$msg.error("取消删除！");
      });

    },
    delete_comment(post_comment_id){
      deletePostComment({
        post_comment_id:post_comment_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("删除该评论成功！")
        }else{
          this.$msg.error("删除该评论失败！");
        }
        this.init();
      })
    },
    //打开修改评论的弹窗
    openUpdate(post_comment_id){
      if(this.user_ifcheck!=1){

        this.$msg.error("未通过身份审核不可修改评论！");
        return false;
      }
      else{
        this.dialogFormVisible=true;
        this.post_comment_id=post_comment_id;
      }
    },
    //  提交评论
    submitForm() {
      if(this.CommentForm.comment_content.length==0) {
        this.$msg.error("输入框不能为空！");
        return false;
      }
      if(this.CommentForm.comment_content.length>200) {
        this.$msg.error("评论内容不能超过200字！");
        return false;
      }
      //再次确认
      this.$confirm('确认修改该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.updateSave();

      }).catch(() => {
        this.$msg.error("修改失败！");
      });

    },
    //  修改评论
    updateSave(){
      updatePostComment({
        post_comment_id:this.post_comment_id,
        post_comment_content:this.CommentForm.comment_content,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("修改该评论成功！");
        }else{
          this.$msg.error("修改该评论失败！");
        }
        this.dialogFormVisible=false;
        this.init();
      });

    },

    //  清空输入框
    resetForm(formName) {
      this.$refs[formName][0].resetFields();
    },
    //  关闭弹窗
    cancel() {
      this.dialogFormVisible = false;
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["CommentForm"][0].resetFields();
      });

    },
    // 右上角 × 取消按钮
    closeDiv() {
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["CommentForm"][0].resetFields();
      });
    },
    handleClose(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["CommentForm"][0].resetFields();
      });
    },


  },
  created() {
    let _this = this;

    _this.init();

  }

}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 20px;
}
.content p:hover{
  color: black;
}
/*新闻标题*/
.title a{
  font-size: 23px;
  color: black;
}
.title a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 300px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.fontclass a{
  font-size: 18px;
  color: #1c6285;
}
.fontclass a:hover{
  font-weight: bold;
}
/*.media:hover{*/
/*  background-color: whitesmoke;*/
/*}*/
</style>
